<template>
	<view class="">
		<view class="cu-form-group pos-r" @tap="openChoice">
			<view class="title">{{label}}</view>
			<!-- 	<picker @change="PickerChange" :value="index" :range="picker" range-key="value">
				<view class="picker">
					{{index>-1?picker[index].value:placeholder}}
				</view>
			</picker> -->
			<view class="flex1 tar padr2">{{dealWithText(index>-1?picker[index].value:placeholder)}}</view>
			<view class="fa fa-angle-right"></view>
			<ripple></ripple>
		</view>
		<view class="cover" @tap="close" :class="anmiCover" v-if="showChoice">
			<view class="pos-a l0 r0 b0 bcf padb5" :class="anmi" style="max-height: 70vh;overflow-y: auto;">
				<view class="list-style-2 martb1">请选择</view>
				<view class="pad2 bdtda marlr5 pos-r round5" 
				v-for="item,index in picker" 
				@click.stop="pick(item.id,index,$event)">
					{{item.value}}
					<ripple></ripple>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "stree",
		props: {
			value: '',
			model: '',
			label: '',
			placeholder: '',
			condtion: ''
		},
		data() {
			return {
				picker: [],
				index: -1,
				anmi: '',
				anmiCover: '',
				showChoice: false
			}
		},
		methods: {
			PickerChange(e) {
				// if(this.index === -1){this.index = 0}else{this.index = e.detail.value}
				this.index = e.detail.value
				this.$emit('input', this.picker[this.index].id)
			},
			openChoice() {
				this.anmi = "animation-slide-bottom"
				this.anmiCover = "animation-fade"
				this.showChoice = true
				setTimeout(() => {
					// this.anmi = "animation-slide-bottom"
					// this.anmiCover = "animation-fade"
					this.anmi = ""
					this.anmiCover = ""
				}, 300)
			},
			pick(id, index,e) {
				// if(this.index === -1){this.index = 0}else{this.index = e.detail.value}
				this.anmi = "animation-slide-bottom animation-reverse"
				setTimeout(() => {
					this.anmiCover = "animation-fade  animation-reverse"
				}, 100)
				setTimeout(() => {
					this.showChoice = false
					this.anmi = ""
					this.anmiCover = ""
				}, 400)
				this.index = index
				this.$emit('input', this.picker[this.index].id)
				// e.preventDefault()
				// e.preventBubble = true
				return false
			},
			close() {
				this.log("close")
				this.anmi = "animation-slide-bottom animation-reverse"
				setTimeout(() => {
					this.anmiCover = "animation-fade  animation-reverse"
				}, 100)
				setTimeout(() => {
					this.showChoice = false
					this.anmi = ""
					this.anmiCover = ""
				}, 400)
			},
			reload() {
				let condtion = {}
				if (this.$com.isbool(this.condtion)) {
					condtion = this.condtion
				}
				this.$api.get("/admin/" + this.model + '/choice', condtion, (res) => {
					this.picker = res.d
					if (this.$com.isbool(this.value)) {
						this.picker.map((data, index) => {
							if (data.id === this.value) {
								this.index = index
							}
						})
					}
				})
			},
			dealWithText(str){
				
				str= str.replace(/└/g,"")
				str= str.replace(/─/g,"")
				str= str.replace(/┤/g,"")
				return str
			}
		},
		mounted() {
			this.reload()
		},
		watch: {
			value(curVal, oldVal) {
				if (this.$com.isbool(curVal)) {
					this.picker.map((data, index) => {
						if (data.id === curVal) {
							this.index = index
						}
					})
				}
			},
			index(curVal, oldVal) {
				if (this.$com.isbool(curVal)) {
					this.picker.map((data, index) => {
						if (data.id === curVal) {
							this.index = index
						}
					})
				}
			},
			condtion(curVal) {
				this.reload()
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	.uni-picker-item {
		text-align: left !important;
	}
</style>
